<template>
    <div>
        <div class="zdx-v-mask" :class="themeBg"></div>
        <div class="zdx-v-container">
            <a class="img-prev" @click="handlePage('prev')"></a>
            <a class="img-next" @click="handlePage('next')"></a>
            <a class="zdx-modal-close" @click="$emit('close')"></a>
            <div class="v-img-wrap"  @click="$emit('close')">
                <div class="v-img" id="v_img"
                    :style="'width:' + viewdata.w + 'px;height:' + viewdata.h + 'px;transform:translate(' + viewdata.transx + 'px, ' + viewdata.transy + 'px);'">
                    <!--img :style="'width:' + viewdata.w + 'px;height:' + viewdata.h + 'px;transform:rotate(' + rotate + 'deg);'" @click="handleAdapt" v-lazy="imgdata.lazy" alt="" /-->
                    <img loading="lazy" :style="'width:' + viewdata.w + 'px;height:' + viewdata.h + 'px;transform:rotate(' + rotate + 'deg);'"
                        @click.stop="handleAdapt" :src="url" alt="" />
                </div>

                <ul class="xzcontrol">
                    <li data-tooltip="切换背景 [B]" @click.stop="handleSwitchBg">
                        <span role="img" class="anticon">
                            <i class="font_family icon-beijing"></i>
                        </span>
                    </li>
                    <li class="VDPptet4"></li>
                    <li data-tooltip="旋转 [R]" @click.stop="handleRotate">
                        <span role="img" class="anticon">
                            <i class="font_family icon-xuanzhuan"></i>
                        </span>
                    </li>
                    <li data-tooltip="适应窗口 [1]" @click.stop="handleAdapt">
                        <span role="img" class="anticon">
                            <i class="font_family icon-quanping"></i>
                        </span>
                    </li>
                    <!-- <li data-tooltip="放大 [ctrl + 滚轮]" @click="handleScale('+')"> -->
                    <li data-tooltip="放大" @click.stop="handleScale('+')">
                        <span role="img" class="anticon">
                            <i class="font_family icon-fangda"></i>
                        </span>
                    </li>
                    <!-- <li data-tooltip="缩小 [ctrl + 滚轮]" @click="handleScale('-')"> -->
                    <li data-tooltip="缩小" @click.stop="handleScale('-')">
                        <span role="img" class="anticon">
                            <i class="font_family icon-suoxiao"></i>
                        </span>
                    </li>
                    <li class="ZsmxC21M" data-tooltip="实际大小 [0]" @click.stop="handleAdapt">{{ ratio }}%</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    data(){
        return {
            ratioIdx:6,
            ratios: [9, 10, 20, 33, 50, 75, 100, 125, 150, 200, 275, 375, 500, 700, 1000],
            viewdata:{
                w: 0,
                h:0,
                transx: 0,
                transy: 0
            },
            themeIdx:0,
            ratio: 100,
            rotate: 0,
            isAdpt: true,
            themeBg: 'zdx-vmask-theme-two',
            themes: ['zdx-vmask-theme-one', 'zdx-vmask-theme-two', 'zdx-vmask-theme-three', 'zdx-vmask-theme-four']
        }
    },
    props:{
        curImgId:{
            type:String,
            default:''
        },
        url:{
            type:String,
            default:''
        }
    },
    watch:{
        url(newv){
            if(this.url){
                this.initImg();
            }
        }
    },
    methods:{
        handlePage(_pageDir){
            this.$emit('changepage',_pageDir);
        },
        onResize(){
            let adptH = document.documentElement.clientHeight - 120;
            if (this.isAdpt) {
                this.viewdata.h = adptH;
                this.ratio = (parseFloat(adptH / this.imgdata.h) * 100).toFixed(0);
                this.viewdata.w = this.imgdata.w * (parseInt(this.ratio) / 100);
                this.viewdata.transx = (document.documentElement.clientWidth - (parseInt(this.ratio) / 100) * this.imgdata.w) / 2;
                this.viewdata.transy = (document.documentElement.clientHeight - this.viewdata.h) / 2;
            } else {
                this.viewdata.w = this.imgdata.w;
                this.viewdata.h = this.imgdata.h;
                this.viewdata.transx = (document.documentElement.clientWidth - this.viewdata.w) / 2
                this.viewdata.transy = 60
                this.ratio = 100
            }
        },
        handleSwitchBg() {
            if (this.themeIdx == this.themes.length - 1) this.themeIdx = 0
            else this.themeIdx++
            let val = this.themes[this.themeIdx]
            this.themeBg = val ? val : this.themes[0]
        },
        // 恢复默认大小
        handleAdapt() {
            this.isAdpt = !this.isAdpt;
            let adptH = document.documentElement.clientHeight - 120;
            if (this.isAdpt) {
                this.viewdata.h = adptH;
                this.ratio = (parseFloat(adptH / this.imgdata.h) * 100).toFixed(0);
                this.viewdata.w = this.imgdata.w * (parseInt(this.ratio) / 100);
                this.viewdata.transx = (document.documentElement.clientWidth - (parseInt(this.ratio) / 100) * this.imgdata.w) / 2;
                this.viewdata.transy = (document.documentElement.clientHeight - this.viewdata.h) / 2;
            } else {
                this.viewdata.w = this.imgdata.w;
                this.viewdata.h = this.imgdata.h;
                this.viewdata.transx = (document.documentElement.clientWidth - this.viewdata.w) / 2
                this.viewdata.transy = 60
                this.ratio = 100
            }
        },
        // 放大缩小
        handleScale(_type) {
            let ratio = parseInt(this.ratio)
            if (_type == '+') {
                if (this.ratioIdx == this.ratios.length - 1) return
                this.ratioIdx++
                ratio = this.ratios[this.ratioIdx]
                this.viewdata.w = this.imgdata.w * (ratio / 100)
                this.viewdata.h = this.imgdata.h * (ratio / 100)
            } else {
                if (this.ratioIdx <= 0) return
                this.ratioIdx--
                ratio = this.ratios[this.ratioIdx]

                this.viewdata.w = this.imgdata.w * (ratio / 100)
                this.viewdata.h = this.imgdata.h * (ratio / 100)
            }
            this.ratio = ratio
            this.viewdata.transx = (document.documentElement.clientWidth - (parseInt(ratio) / 100) * this.imgdata.w) / 2
            this.viewdata.transy = (document.documentElement.clientHeight - (parseInt(ratio) / 100) * this.imgdata.h) / 2
        },
        // 重设基本参数
        handleReset() {
            if (!this.viewdata.w) this.viewdata.w = this.viewdata.width
            if (!this.viewdata.h) this.viewdata.h = this.viewdata.height
            this.ratioIdx = 6
            this.rotateNumber = 1
            this.themeBg = 'zdx-vmask-theme-two'
            this.themeIdx = 1
            this.rotate = 0
            this.isAdpt = true
            this.ratio = 100
            // this.imgdata = this.viewdata

            this.imgdata=JSON.parse(JSON.stringify(this.viewdata));
            this.viewdata = {
                w: this.viewdata.width,
                h: this.viewdata.height,
                transx: 0,
                transy: 0
            }
        },
        handleRotate() {
            this.rotate -= 90;
            this.rotateNumber++;
        },
        initImg(){
            let img=new Image();
            let that=this;
            img.onload=function(){
                that.viewdata.w=img.width;
                that.viewdata.h=img.height;
                that.handleReset() // 重设基本参数
                that.handleAdapt() // 恢复默认大小
            }
            img.src=this.url;
        },
        keyupCallback(e){
            let that=this;
            if (e.keyCode == 66) {
                that.handleSwitchBg()
            } else if (e.keyCode == 82) {
                that.handleRotate()
            } else if (e.keyCode == 49 || e.keyCode == 97) {
                that.isAdpt = false
                that.handleAdapt()
            }
            else if (e.keyCode == 27) {
                that.$emit('close')
            }else if (e.keyCode == 37) {
                that.handlePage('prev')
            }else if (e.keyCode == 39) {
                that.handlePage('next')
            }
        }
    },
    destroyed(){
        $('.img-component').css('overflow-y','auto');

        window.removeEventListener('resize',this.onResize);
        window.removeEventListener('keyup',this.keyupCallback);
    },
    mounted(){
        $('.img-component').css('overflow-y','hidden');
        if(this.url){
            this.initImg();
        }

        window.addEventListener('keyup',this.keyupCallback);
        window.addEventListener('resize',this.onResize);
    }
}
</script>

<style lang="less">
@import url('../assets/20220929/iconfont/iconfont.css');
.zdx-v-container{
    .img-prev {
            width: 40px;
            height: 40px;
            background: url('../assets/pro/img_prev.svg') no-repeat;
            background-size: cover;
            border-radius: 40px;
            border: none;
            cursor: pointer;
            position: absolute;
            left:20px;
            top: calc((100% - 40px) / 2);
            z-index:118;

            &:hover {
                background: url('../assets/pro/img_prev_active.svg') no-repeat;
                background-size: cover;
            }
        }

        .img-next {
            width: 40px;
            height: 40px;
            background: url('../assets/pro/img_next.svg') no-repeat;
            background-size: cover;
            border-radius: 40px;
            cursor: pointer;
            border: none;
            position: absolute;
            top: calc((100% - 40px) / 2);
            right: 20px;
            z-index:118;

            &:hover {
                background: url('../assets/pro/img_next_active.svg') no-repeat;
                background-size: cover;
                border: none;
            }
        }
}
</style>